{% if message.tags == 'error' %}
    <div id="alert-error" class="flex items-center p-4 mb-4 rounded-lg bg-red-50 dark:bg-gray-800 border-l-4 border-red-600 dark:border-red-600 shadow-sm transition-opacity duration-300" role="alert">
        <i class="fa-solid fa-circle-xmark flex-shrink-0 inline text-xl text-red-600 dark:text-red-500"></i>
        <div class="ms-3 text-sm font-medium text-red-700 dark:text-red-400">{{ message|safe }}</div>
        <button type="button" class="ms-auto -mx-1.5 -my-1.5 bg-red-50 text-red-500 rounded-lg focus:ring-2 focus:ring-red-400 p-1.5 hover:bg-red-200 inline-flex items-center justify-center h-8 w-8 dark:bg-gray-800 dark:text-red-400 dark:hover:bg-gray-700" data-dismiss-target="#alert-error" aria-label="关闭">
            <span class="sr-only">关闭</span>
            <i class="fa-solid fa-xmark w-3 h-3"></i>
        </button>
    </div>
{% elif message.tags == 'info' %}
    <div id="alert-info" class="flex items-center p-4 mb-4 rounded-lg bg-blue-50 dark:bg-gray-800 border-l-4 border-blue-600 dark:border-blue-600 shadow-sm transition-opacity duration-300" role="alert">
        <i class="fa-solid fa-circle-info flex-shrink-0 inline text-xl text-blue-600 dark:text-blue-500"></i>
        <div class="ms-3 text-sm font-medium text-blue-700 dark:text-blue-400">{{ message|safe }}</div>
        <button type="button" class="ms-auto -mx-1.5 -my-1.5 bg-blue-50 text-blue-500 rounded-lg focus:ring-2 focus:ring-blue-400 p-1.5 hover:bg-blue-200 inline-flex items-center justify-center h-8 w-8 dark:bg-gray-800 dark:text-blue-400 dark:hover:bg-gray-700" data-dismiss-target="#alert-info" aria-label="关闭">
            <span class="sr-only">关闭</span>
            <i class="fa-solid fa-xmark w-3 h-3"></i>
        </button>
    </div>
{% elif message.tags == 'success' %}
    <div id="alert-success" class="flex items-center p-4 mb-4 rounded-lg bg-green-50 dark:bg-gray-800 border-l-4 border-green-600 dark:border-green-600 shadow-sm transition-opacity duration-300" role="alert">
        <i class="fa-solid fa-circle-check flex-shrink-0 inline text-xl text-green-600 dark:text-green-500"></i>
        <div class="ms-3 text-sm font-medium text-green-700 dark:text-green-400">{{ message|safe }}</div>
        <button type="button" class="ms-auto -mx-1.5 -my-1.5 bg-green-50 text-green-500 rounded-lg focus:ring-2 focus:ring-green-400 p-1.5 hover:bg-green-200 inline-flex items-center justify-center h-8 w-8 dark:bg-gray-800 dark:text-green-400 dark:hover:bg-gray-700" data-dismiss-target="#alert-success" aria-label="关闭">
            <span class="sr-only">关闭</span>
            <i class="fa-solid fa-xmark w-3 h-3"></i>
        </button>
    </div>
{% elif message.tags == 'warning' %}
    <div id="alert-warning" class="flex items-center p-4 mb-4 rounded-lg bg-yellow-50 dark:bg-gray-800 border-l-4 border-yellow-500 dark:border-yellow-600 shadow-sm transition-opacity duration-300" role="alert">
        <i class="fa-solid fa-triangle-exclamation flex-shrink-0 inline text-xl text-yellow-600 dark:text-yellow-500"></i>
        <div class="ms-3 text-sm font-medium text-yellow-700 dark:text-yellow-400">{{ message|safe }}</div>
        <button type="button" class="ms-auto -mx-1.5 -my-1.5 bg-yellow-50 text-yellow-500 rounded-lg focus:ring-2 focus:ring-yellow-400 p-1.5 hover:bg-yellow-200 inline-flex items-center justify-center h-8 w-8 dark:bg-gray-800 dark:text-yellow-400 dark:hover:bg-gray-700" data-dismiss-target="#alert-warning" aria-label="关闭">
            <span class="sr-only">关闭</span>
            <i class="fa-solid fa-xmark w-3 h-3"></i>
        </button>
    </div>
{% else %}
    <div id="alert-default" class="flex items-center p-4 mb-4 rounded-lg bg-gray-50 dark:bg-gray-800 border-l-4 border-gray-500 dark:border-gray-600 shadow-sm transition-opacity duration-300" role="alert">
        <i class="fa-solid fa-circle-info flex-shrink-0 inline text-xl text-gray-600 dark:text-gray-500"></i>
        <div class="ms-3 text-sm font-medium text-gray-700 dark:text-gray-400">{{ message|safe }}</div>
        <button type="button" class="ms-auto -mx-1.5 -my-1.5 bg-gray-50 text-gray-500 rounded-lg focus:ring-2 focus:ring-gray-400 p-1.5 hover:bg-gray-200 inline-flex items-center justify-center h-8 w-8 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-gray-700" data-dismiss-target="#alert-default" aria-label="关闭">
            <span class="sr-only">关闭</span>
            <i class="fa-solid fa-xmark w-3 h-3"></i>
        </button>
    </div>
{% endif %}